<template>
  <router-view v-slot="{ Component, route }">
    <keep-alive>
      <component :is="Component" v-if="route.meta?.isAlive && isUseTabsRouter" :key="key" />
    </keep-alive>
    <component :is="Component" v-if="!(route.meta?.isAlive && isUseTabsRouter)" :key="key" />
  </router-view>
  <frame-page />
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useSettingStore, useTabsRouterStore } from '@/store';
import FramePage from '@/layouts/frame/index.vue';

const settingStore = useSettingStore();
const tabsRouterStore = useTabsRouterStore();
const route1 = useRoute();

const isUseTabsRouter = computed(() => {
  return settingStore.isUseTabsRouter;
});

const key = computed(() => {
  return tabsRouterStore.tabRouterList.find((x) => x.path === route1.fullPath)?.key;
});
</script>
